<template>
	<view class="container">
		<!-- 输入框 -->
		<u--form labelPosition="left" :model="model1"   ref="uForm" labelWidth="100">
			<u-form-item label="幢号/栋号"   borderBottom>
				<u--input v-model="model1.userInfo.buildingNumber" border="none" type="number" placeholder="请输入幢号/栋号"
					></u--input>
			</u-form-item>
			<u-form-item label="单元号"   borderBottom>
				<u--input v-model="model1.userInfo.unitNumber" border="none" placeholder="请输入单元号" type="number"></u--input>
			</u-form-item>
			<u-form-item label="室号"  borderBottom>
				<u--input v-model="model1.userInfo.ventricleNumber" border="none" placeholder="请输入室号" type="number"></u--input>
			</u-form-item>
			<u-form-item label="房号"  borderBottom>
				<u--input v-model="model1.userInfo.roomNumber" border="none" placeholder="请输入房号" type="number"></u--input>
			</u-form-item>
			<u-form-item label="户型选择"  borderBottom>
				<template slot="right">
					<view class="" style="width: 300rpx;">
						<uni-data-select v-model="model1.userInfo.houseType || '请选择'" :localdata="range"
							@change="model1.userInfo.houseType = $event" :clear="false"></uni-data-select>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="楼层" prop="userInfo.floor" borderBottom>
				<template slot="right">
					<view class="slot_floor">
						<view :class="['item', acyiveFloor == 1 ? 'active_floor' :'']" @click="acyiveFloor = 1">电梯
						</view>
						<view :class="['item', acyiveFloor == 0 ? 'active_floor' :'']" @click="acyiveFloor = 0">楼梯
						</view>
					</view>
				</template>
				<br />
				<u--input v-model="model1.userInfo.floor" border="none" placeholder="请输入楼层"></u--input>
			</u-form-item>
			<u-form-item label="面积"  borderBottom>
				<u--input v-model="model1.userInfo.area" border="none" type="number" placeholder="请输入面积"></u--input>
				<template slot="right">
					<view>m²</view>
				</template>
			</u-form-item>
			<u-form-item label="房屋类型"  borderBottom>
				<template slot="right">
					<view class="" style="width: 300rpx;">
						<uni-data-select v-model="model1.userInfo.buildingType || '请选择'" :localdata="buildingTypeRange"
							@change="model1.userInfo.buildingType = $event" :clear="false"></uni-data-select>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="卧室类型"  borderBottom>
				<template slot="right">
					<view class="" style="width: 300rpx;">
						<uni-data-select v-model="model1.userInfo.bedroomType || '请选择'" :localdata="bedroomTypeRange"
							@change="changehouseType" :clear="false"></uni-data-select>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="筛选标签"  borderBottom>
				<template slot="right">
					<view class="tag_box">
						<view v-for="(tagItem, tagIndex) in houseLabelList" :key="tagItem.labelName" :class="['item']"
							@click="acyiveFloor = 1"> {{ tagItem.labelName }}
						</view>
						<view class="add_tag" @click="addTag">
							添加
						</view>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="租金"  borderBottom>
				<u--input v-model="model1.userInfo.rental" type="number" border="none" placeholder="请输入租金"></u--input>
				<template slot="right">
					<view>元/月</view>
				</template>
			</u-form-item>
			<u-form-item label="租赁方式"  borderBottom>
				<template slot="right">
					<view class="" style="width: 300rpx;">
						<uni-data-select v-model="model1.userInfo.rentalMode || '请选择'" :localdata="rentalModeRange"
							@change="model1.userInfo.rentalMode = $event" :clear="false"></uni-data-select>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="出租状态"  borderBottom>
				<!-- 	<u--input v-model="model1.userInfo.name" border="none"></u--input> -->
				<template slot="right">
					<view class="slot_floor">
						<view :class="['item', rentState == 1 ? 'active_floor' :'']" @click="rentState = 1">已租
						</view>
						<view :class="['item', rentState == 0 ? 'active_floor' :'']" @click="rentState = 0">未租
						</view>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="看房钥匙"  borderBottom>
				<template slot="right">
					<view class="" style="width: 300rpx;">
						<uni-data-select v-model="model1.userInfo.houseKey || '请选择'" :localdata="houseKeyRange"
							@change="model1.userInfo.houseKey = $event" :clear="false"></uni-data-select>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="图片/视频"  borderBottom>
				<Upload num="6" @change="checkedImg"></Upload>
			</u-form-item>
			<u-form-item label="其他备注"  borderBottom>
				<u--textarea v-model="model1.userInfo.remark" placeholder="请输入内容"></u--textarea>
			</u-form-item>
			
		</u--form>
		<!-- 按钮 -->
		<view class="submint_btn">
			<view class="submin_box">
				<u-button type="primary" text="确定" @click="leaseHouse"></u-button>
			</view>
		</view>
		<u-modal :show="modalShow" title="添加标签" showCancelButton @cancel="modalShow = false" @confirm="addConfirmTag">
			<u--input placeholder="最多可输入六个字" border="surround" v-model.trim="newTagname" maxlength="6"></u--input>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		addHouseInfo, // 房东新增房源信息
	} from "@/api/home/index.js"

	import Upload from "@/components/Upload/index.vue"
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"
	export default {
		// const formData = ref();
		data() {
			return {
				midelList: [],
				modalShow: false,
				newTagname: "",
				acyiveFloor: 1,
				rentState: 1,
				showIndex: 0,
				houseInfo: {},
				showSex: false,
				houseLabelList: [{
						labelName: "地铁"
					},
					{
						labelName: "电梯"
					},
					{
						labelName: "冰箱"
					},
					{
						labelName: "洗衣机"
					},
					{
						labelName: "空调"
					},
					{
						labelName: "独卫"
					},
				],
				model1: {
					userInfo: {
						buildingNumber: '',
						unitNumber: '',
						floor: '',
						area: '',
						ventricleNumber: '',
						roomNumber: '',
						bedroomType: '',
						houseType: '',
						buildingType: '',
						stairType: '',
						rental: "",
						rentalMode: "",
						rentState: "",
						remark: "",
						mediaList: [{
							mediaLabel: "",
							mediaType: "",
							mediaUrl: "",
							isPoster: ""
						}],
						rentalType: '',
						communityId: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
		 
				radio: '',
				switchVal: false,
				buildingTypeRange: [{
						value: 1,
						text: "小区"
					},
					{
						value: 2,
						text: "公寓"
					},
					{
						value: 3,
						text: "别墅"
					},
					{
						value: 4,
						text: "自建房"
					},
				],
				bedroomTypeRange: [

					{
						value: 1,
						text: "主卧"
					},
					{
						value: 2,
						text: "次卧"
					},
					{
						value: 3,
						text: "书房"
					},
					{
						value: 4,
						text: "隔间"
					},
					{
						value: 5,
						text: "其他"
					},
				],
				houseKeyRange: [

					{
						value: 1,
						text: "消防栓"
					},
					{
						value: 2,
						text: "水表箱"
					},
					{
						value: 3,
						text: "电表箱"
					},
					{
						value: 4,
						text: "物业保安"
					},
					{
						value: 5,
						text: "牛奶箱"
					},
					{
						value: 6,
						text: "门口地毯"
					},
					{
						value: 7,
						text: '其他位置'
					},
					{
						value: 7,
						text: '联系房东'
					},
				],
				// 消防栓、水表箱、电表箱、物业保安、牛奶箱、门口地毯、其他位置、联系房东
				rentalModeRange: [{
						value: 1,
						text: "付一押一"
					},
					{
						value: 2,
						text: "付二押一"
					},
					{
						value: 3,
						text: "付三押一"
					},
					{
						value: 4,
						text: "付二押二"
					},
					{
						value: 5,
						text: "付六押一"
					},
					{
						value: 6,
						text: "一年一付"
					},
					{
						value: 7,
						text: '其他协定'
					}
				],
				range: [{
						value: 0,
						text: "1室"
					},
					{
						value: 1,
						text: "2室"
					},
					{
						value: 2,
						text: "3室"
					},
					{
						value: 2,
						text: "4室以上"
					},
				],
			}
		},
		components: {
			Upload,
			uniDataSelect
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async leaseHouse() {
				const res = await addHouseInfo({
					communityId: 18,
					rentalType: 0,
					buildingNumber: this.model1.userInfo.buildingNumber,
					unitNumber: this.model1.userInfo.unitNumber,
					floor: this.model1.userInfo.floor,
					area: this.model1.userInfo.area,
					ventricleNumber: this.model1.userInfo.ventricleNumber,
					roomNumber: this.model1.userInfo.roomNumber,
					bedroomType: this.model1.userInfo.bedroomType,
					houseType: this.model1.userInfo.houseType,
					buildingType: this.model1.userInfo.buildingType,
					stairType: this.acyiveFloor,
					rental: this.model1.userInfo.rental,
					rentalMode: this.model1.userInfo.rentalMode,
					houseKey: this.model1.userInfo.houseKey,
					remark: this.model1.userInfo.remark,
					houseLabelList: this.houseLabelList,
					mediaLabel: this.midelList
				})
				
			 
				if (res.data.code != 200) return 
				this.$refs.uToast.show({
					message:res.data.msg,
					type:'error'
				})
				uni.switchTab({
					url: '/pages/house/index',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})

			},

			addConfirmTag() {
				var value = this.newTagname.trim();
				if (value.length <= 6 && value.length != 0) {
					this.houseLabelList.push({
						labelName: value
					})
					this.modalShow = false
				} else {
					this.$refs.uToast.show({
						message:'内容不合法',
						type:'error'
					})
				}
				this.newTagname = ""
			},
			addTag() {
				this.modalShow = true
			},
			changehouseType(data) {
			 
				this.model1.userInfo.bedroomType = data
			},
			isVideoPath(path) {
				const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.mkv', '.flv', '.webm']; // 常见视频文件扩展名列表
				const extension = path.toLowerCase().split('.').pop(); // 获取路径中的扩展名部分，并转为小写

				return videoExtensions.includes(extension);
			},
			checkedImg(filelist) {
			 
				if (filelist.length != 0) {
					filelist.map((item, index) => {
						this.midelList.push({
							mediaLabel: "",
							mediaType: this.isVideoPath(item) ? 1 : 0,
							mediaUrl: item,
							isPoster: 1
						})
					})
				}
			 
			},
			async validate() {
				await this.$refs.form.validate();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";

	.submint_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #5a5a5a;
		left: 0rpx;

		.submin_box {
			margin: 30rpx auto;
			border-radius: 40rpx;
			overflow: hidden;
			width: 80%;

		}
	}


	.active_floor {
		background-color: $theme;
		border: 1rpx solid $theme !important;
		color: #fff;
	}

	.container {
		margin-bottom: 140rpx;

		.slot_floor {
			width: 100%;
			height: auto;
		}

		.tag_box {
			width: 500rpx;
			word-wrap: break-word;
			float: right;
			height: auto;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;

			// background-color: red;
			.add_tag {
				// position: absolute;
				margin-top: 20rpx;
				right: -15%;
				padding: 6rpx 12rpx;
				display: inline-block;
				// height: 100%;
				// width: 12%;
				margin-left: 10rpx;
				border-radius: 10rpx;
				top: 10rpx;
				background-color: $theme;
				color: #fff;
			}
		}
	}

	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #767676;
		margin-left: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}
</style>